import React from 'react'
import {TouchableOpacity,Platform} from 'react-native'
import {createStackNavigator,createAppContainer,createBottomTabNavigator} from 'react-navigation';
import Icon from 'react-native-vector-icons/FontAwesome5';
import HomePage from '../views/HomePage'
import HelpCenter from '../views/HelpCenter'
import MyPage from '../views/MyPage'
import ShopList from '../views/ShopList'
import ShopAdd from '../views/ShopAdd'
import CashPage from '../views/CashPage'
import LoginScreen from '../views/LoginScreen'

const tabNavigatorScreen = createBottomTabNavigator({
    HomePage:{
        screen:HomePage,
        navigationOptions:()=> {
            return {
                tabBarLabel: '首页',
                tabBarIcon: ({focused, tintColor}) => {
                    if (focused) {
                        return (
                            <Icon name={'home'} solid size={commonStyle.tabBarSize} color={tintColor} />
                        );
                    }
                    return (
                        <Icon name={'home'} light size={commonStyle.tabBarSize}/>
                    );
                },
            }
        }
    },
    HelpCenter:{
        screen:HelpCenter,
        navigationOptions:({navigations})=> {
            return {
                tabBarLabel: '服务中心',
                tabBarIcon: ({focused, tintColor}) => {
                    if (focused) {
                        return (
                            <Icon name={'comment-dots'} solid size={commonStyle.tabBarSize} color={tintColor}/>
                        );
                    }
                    return (
                        <Icon name={'comment-dots'}  size={commonStyle.tabBarSize} />
                    );
                },
            }
        }
    },
    MyPage:{
        screen:MyPage,
        navigationOptions:()=> {
            return {
                tabBarLabel: '我',
                tabBarIcon: ({focused, tintColor}) => {
                    if (focused) {
                        return (
                            <Icon name={'user'} solid size={commonStyle.tabBarSize} color={tintColor}/>
                        );
                    }
                    return (
                        <Icon name={'user'}  size={commonStyle.tabBarSize}/>
                    );
                },
            }
        }
    }
},{
    initialRouteName: 'HomePage',
    // tabBarComponent:CustomTabbar,
    tabBarOptions: {
        activeTintColor: '#dda95e',
        inactiveTintColor: '#949494',
        showIcon: true,
        labelStyle: {
            fontSize: ScreenUtil.setSpText2(12),
            marginTop: 0,
            marginBottom: 0,
        },
        style: {
            backgroundColor: 'white',
            paddingBottom: ScreenUtil.scaleHeight(5),
        },
        tabStyle: {
        }
    },
    tabBarPosition: 'bottom',
})

const  AppNavigator = createStackNavigator({
    // Splash:Splash,
    HomePage: {
        screen: tabNavigatorScreen,
        navigationOptions: {//在这里定义每个页面的导航属性，静态配置
            // title: "车载销售系统",
            headerStyle:{
                height:0,
            },
            headerTitleStyle :{
                flex:1,
                textAlign: 'center'
            },
            headerTintColor: '#f4511e'
        }
    },
    LoginScreen:{
        screen:LoginScreen,
        navigationOptions: {//在这里定义每个页面的导航属性，静态配置
            // title: "车载销售系统",
            headerStyle:{
                height:0,
            }
        }
    },
    ShopList:{
        screen:ShopList,
        navigationOptions: ({ navigation }) => ({//在这里定义每个页面的导航属性，静态配置
                title: "店铺列表",
                headerStyle:{
                    height:ScreenUtil.scaleHeight(50),
                    color:'#666',
                    borderBottomWidth: Platform.OS == 'ios'?1:undefined,
                    shadowOpacity: Platform.OS == 'android'? 0.1:undefined,
                    elevation: Platform.OS == 'android'?1:undefined,
                },
                headerTitleStyle :{
                    flex:1,
                    textAlign: 'center',
                    fontSize:17,
                    
                },
                headerTintColor: '#666',
                headerRight:(
                    <TouchableOpacity style={{padding:10}} onPress={() => {navigation.navigate('ShopAdd')}}>
                        <Icon name='plus' light size={18} color="#999" /> 
                    </TouchableOpacity>
                ),
                headerRightContainerStyle:{
                    marginRight:10,
                },
            }
        )
    },
    ShopAdd:{
        screen:ShopAdd,
        navigationOptions: {//在这里定义每个页面的导航属性，静态配置
            title: "新增店铺",
            headerStyle:{
                height:ScreenUtil.scaleHeight(50),
                color:'#666',
                borderBottomWidth: Platform.OS == 'ios'?1:undefined,
                shadowOpacity: Platform.OS == 'android'? 0.1:undefined,
                elevation: Platform.OS == 'android'?1:undefined,
            },
            headerTitleStyle :{
                flex:1,
                textAlign: 'center',
                marginLeft:-30,
                fontSize:17,
            },
            headerTintColor: '#666'
        }
    },
    CashPage:{
        screen:CashPage,
        navigationOptions: {//在这里定义每个页面的导航属性，静态配置
            title: "提现",
            headerStyle:{
                height:ScreenUtil.scaleHeight(50),
                color:'#666',
                borderBottomWidth: Platform.OS == 'ios'?1:undefined,
                shadowOpacity: Platform.OS == 'android'? 0.1:undefined,
                elevation: Platform.OS == 'android'?1:undefined,
            },
            headerTitleStyle :{
                flex:1,
                textAlign: 'center',
                marginLeft:-30,
            },
            headerTintColor: '#666'
        }
    },
    
},{
    defaultNavigationOptions: {
        // header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
        mode: 'card',
        headerMode: 'none',
    }
})
let Navaigator = createAppContainer(AppNavigator);
export default ()=> <Navaigator/>;

